<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单维护</title>
</head>
<body>
	<link rel="STYLESHEET" type="text/css" href="${pageContext.request.contextPath}/dhtmlxTree/codebase/dhtmlxtree.css">
	<script  src="${pageContext.request.contextPath}/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
	<script  src="${pageContext.request.contextPath}/dhtmlxTree/codebase/dhtmlxtree.js"></script>
	<script src="${pageContext.request.contextPath}/dhtmlxTree/codebase/ext/dhtmlxtree_ed.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/dhtmlxTree/codebase/dhtmlxdataprocessor.js"></script> 
	<script>
	
		function fixImage(id){
			switch(tree.getLevel(id)){
			case 1:
			tree.setItemImage2(id,'folderClosed.gif','folderOpen.gif','folderClosed.gif');
				break;
			case 2:
			tree.setItemImage2(id,'folderClosed.gif','folderOpen.gif','folderClosed.gif');			
				break;
			case 3:
			tree.setItemImage2(id,'folderClosed.gif','folderOpen.gif','folderClosed.gif');			
				break;			
			default:
			tree.setItemImage2(id,'leaf.gif','folderClosed.gif','folderOpen.gif');			
				break;
			}
		}
		
	</script>
	
	<div style="float:left;">
		<div id="treeboxbox_tree" style="width:350px; height:218px;background-color:#f5f5f5;border :1px solid Silver; overflow:auto;"></div>
		<div>
			<button onclick="document.getElementById('treeItemForm').style.display = '';">添加</button>
			<button onClick="tree.deleteItem(tree.getSelectedItemId(),true);" title="删除选中(高亮显示)的菜单项">删除</button>
			
		</div>
	</div>
	<div style="margin-left: 50px;float: left;width:500px">
		<p>请在左侧选择节点，然后按如下提示进行操作</p>
		<ul>
			<li>要添加节点，请从树中选择一个现有节点作为父节点，然后在右侧的表单中输入[名称]和[URL]，接着点击[添加]按钮</li>
			<li>要编辑节点，请在左侧树中双击要编辑的节点，然后进行修改（您可以方便的修改[节点名]）；或者在右侧的表单中输入新的数据，然后点击[更新数据]</li>
			<li>要删除节点，请在左侧选中一个节点，点击[删除]按钮</li>
		</ul>
		<table id="treeItemForm" cellpadding="0" cellspacing="3" style="display: table;">
			<tr>
				<td style="text-align: right">
					菜单名称
				</td>
				<td>
					<input type="text"  id="ed1" style=" width : 393px;">
				</td>
			</tr>
			<tr>
				<td  style="text-align: right">
					URL
				</td>
				<td>
					<input type="text" id="ed2" style=" width : 393px;">
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td style="text-align: right">
					<button onClick="var d=new Date(); tree.insertNewItem(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT'); tree.setUserData(tree.getSelectedItemId(),'url',document.getElementById('ed2').value); fixImage(tree.getSelectedItemId());" title="添加为当前菜单的子菜单">添加为子菜单</button>
					<button  onClick="var d=new Date(); tree.insertNewNext(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT');tree.setUserData(d.valueOf(),'url',document.getElementById('ed2').value);  fixImage(d.valueOf());" title="添加为当前菜单的同级菜单">添加为同级菜单</button >
					<button onclick="tree.setItemText(tree.getSelectedItemId,document.getElementById('ed1').value); tree.setUserData(tree.getSelectedItemId,'url',document.getElementById('ed2').value);" title="更新选中节点的数据（名称、URL）为您在上面填写的内容">更新数据</button>
					&nbsp;&nbsp;<button onclick="document.getElementById('treeItemForm').style.display = 'none';" title="取消操作">取消</button>
				</td>
			</tr>
		</table>
	</div>
	
	<script>
			function validateInput(state,id,tree,value){
			    if ((state==2)&&(value=="")) return false;
			    return true;
			}
			
			function onNodeSelect(nodeId) {
				alert("Node #" + nodeId + " selected.");
				document.getElementById('ed1').value = tree.getSelectedItemText();
				document.getElementById('ed2').value = tree.getUserData(tree.getSelectedItemId(),"url");
			}
			
				
	
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			tree.setImagePath("${pageContext.request.contextPath}/dhtmlxTree/codebase/imgs/csh_bluebooks/");
			//tree.enableCheckBoxes(1);

			// enable editing on doubleclick
			tree.enableItemEditor(true);
			
			// set validator function
			tree.setOnEditHandler(validateInput);
			
			tree.setOnClickHandler(onNodeSelect);
						
			
						
			tree.loadXML("menuTreeData");

			// tree.init();

			myDataProcessor = new dataProcessor("${pageContext.request.contextPath}/updateTreeData"); 
			myDataProcessor.init(tree); 


	</script>
</body>
</html>